import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { ArrowLeft, Filter } from 'lucide-react'

const MistakeBook = () => {
  const navigate = useNavigate()
  const [selectedWords, setSelectedWords] = useState([])

  // 示例错词数据
  const mistakes = [
    {
      id: 1,
      word: 'necessary',
      chinese: '必需的',
      lastMistake: 'Apr 28, 2024'
    },
    {
      id: 2,
      word: 'tomorrow',
      chinese: '明天',
      lastMistake: 'Apr 28, 2024'
    },
    {
      id: 3,
      word: 'convenient',
      chinese: '方便的',
      lastMistake: 'Apr 28, 2024'
    },
    {
      id: 4,
      word: 'vegetable',
      chinese: '蔬菜',
      lastMistake: 'Apr 28, 2024'
    },
    {
      id: 5,
      word: 'environment',
      chinese: '环境',
      lastMistake: 'Apr 28, 2024'
    },
    {
      id: 6,
      word: 'polite',
      chinese: '礼貌的',
      lastMistake: 'Apr 27, 2024'
    }
  ]

  const toggleWordSelection = (wordId) => {
    setSelectedWords(prev => 
      prev.includes(wordId) 
        ? prev.filter(id => id !== wordId)
        : [...prev, wordId]
    )
  }

  const practiceAll = () => {
    console.log('Practice all words')
    // 这里可以导航到练习页面
  }

  const reviewSelected = () => {
    console.log('Review selected words:', selectedWords)
    // 这里可以导航到复习页面
  }

  return (
    <div className="min-h-screen p-4">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => navigate('/')}
            className="mr-4"
          >
            <ArrowLeft size={24} />
          </Button>
          <h1 className="text-2xl font-bold text-gray-800">Mistake Book</h1>
        </div>
        <Button variant="ghost" size="icon">
          <Filter size={24} />
        </Button>
      </div>

      {/* Mistake List */}
      <div className="space-y-3 mb-6">
        {mistakes.map((mistake) => (
          <Card 
            key={mistake.id} 
            className={`cursor-pointer transition-colors ${
              selectedWords.includes(mistake.id) 
                ? 'bg-blue-50 border-blue-200' 
                : 'bg-white hover:bg-gray-50'
            }`}
            onClick={() => toggleWordSelection(mistake.id)}
          >
            <CardContent className="p-4">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="text-xl font-bold text-gray-800 mb-1">
                    {mistake.word}
                  </h3>
                  <p className="text-gray-600 mb-2">{mistake.chinese}</p>
                  <p className="text-sm text-gray-500">
                    Last Mistake {mistake.lastMistake}
                  </p>
                </div>
                {selectedWords.includes(mistake.id) && (
                  <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
                    <div className="w-2 h-2 bg-white rounded-full"></div>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Action Buttons */}
      <div className="flex gap-4">
        <Button 
          onClick={practiceAll}
          className="flex-1 bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-xl"
        >
          Practice All
        </Button>
        <Button 
          onClick={reviewSelected}
          disabled={selectedWords.length === 0}
          className="flex-1 bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-xl disabled:bg-gray-300"
        >
          Review Selected
        </Button>
      </div>
    </div>
  )
}

export default MistakeBook

